﻿@{
    ViewBag.Title = "Action";
}
 <link rel="stylesheet"
        href="../../Content/jquery-ui/redmond/jquery-ui-1.8.14.custom.css"
            type="text/css" />
    <link rel="stylesheet"
        href="../../Content/jquery-grid/ui.jqgrid.css" type="text/css" />

       <script src="../../Scripts/jquery-1.6.2.min.js"
        type="text/javascript"></script>
    <script src="../../Scripts/jquery-grid/grid.locale-en.js"
        type="text/javascript"></script>
    <script src="../../Scripts/jquery-grid/jquery.jqGrid.min.js"
        type="text/javascript"></script>



<h2>Action</h2>

<script type="text/javascript">
        $(document).ready(function() {
            $('#jqgProducts').jqGrid({
                //url from wich data should be requested
                url: '/Home/ProductsGridData/',
                //type of data
                datatype: 'json',
                //url access method type
                mtype: 'GET',
                //columns names
                colNames: ['Name'],
                //columns model
                colModel: [
                       
                            { name: 'Name', index: 'Name', align: 'left' }
                            ],
                //pager for grid
                pager: $('#jqgpProducts'),
                //number of rows per page
                rowNum: 10,
                //initial sorting column
                sortname: 'Id',
                //initial sorting direction
                sortorder: 'asc',
                //we want to display total records count
                viewrecords: true,
                //grid width
                width: 'auto',
                //grid height
                height: 'auto'
            });
        }); 
</script>

    <table id="jqgProducts" cellpadding="0" cellspacing="0"></table>
    <div id="jqgpProducts" style="text-align:center;"></div>